import {View,Canvas} from "@tarojs/components";
import {useEffect, useRef, useState} from "react";
import SeatCore from "./core";
import './index.scss'
import DefaultMap from "./defaultMap";
import SeatNav from "./seatNav";
import MinMap from "./minMap";
import AreaMap from "./areaMap";

export default ({seatData=[],catelist=[],options,selectSeat=[],onClickSeat=(()=>{}),onHandleShowReset=(()=>{}),showReset=false}) => {//

  const canvasRef = useRef()
  const [coreInstance,setCoreInstance]=useState({})
  const [renderData,setRenderData]=useState(null)
  const [inited,setInited] = useState(false)
  const [showMinMap,setShowMinMap] = useState(false)
  const [initData,setInitData]=useState(null)

  useEffect(()=>{
    if(!showReset&&coreInstance.options){
      coreInstance.reset()
    }
  },[showReset])

  useEffect(() => {
    if(seatData.length&&!inited){
      setInited(true)
      setCoreInstance(new SeatCore({
        ...options,
        seatData,
        catelist,
        onInitMap(evt){
          console.log('onInitMap',evt)
          setInitData(evt)
        },
        onClickSeat:(evt,pos)=>{
          onClickSeat(evt,pos)
        },
        onRender:(evt)=>{
          // console.log('onRender',evt)
          setRenderData(evt)
        },
        onShowMinMap:(evt)=>{
          setShowMinMap(evt)
        },
        onHandleShowReset:(evt)=>{
          onHandleShowReset(evt)
        },
        cavnasNode:canvasRef.current
      }))
    }
  }, [seatData]);
  return (
    <View className='movable-box' style={`width:${options.boxW}px;height:${options.boxH}px`}>
      <Canvas ref={canvasRef} className="canvas-node" id="canvasNode" type="2d"></Canvas>
      {
        initData&&renderData&&
        <MinMap show={showMinMap} initData={initData} seatData={seatData} renderData={renderData} selectSeat={selectSeat}></MinMap>
      }
      {
        initData&&renderData&&
        <View className='movable-win' onMousedown={(e)=>coreInstance.mousedownEvent(e)} onMouseMove={(e)=>coreInstance.mousemoveEvent(e)} onMouseUp={(e)=>coreInstance.mouseupEvent(e)}
          onTouchStart={(e)=>coreInstance.touchStartEvent(e)} onTouchMove={(e)=>coreInstance.touchMoveEvent(e)} onTouchEnd={(e)=>coreInstance.touchEndEvent(e)}
        >
          {
            !initData.isArea&&
            <SeatNav seatData={seatData} renderData={renderData} initData={initData}></SeatNav>
          }
          <View className='movable-content' style={`transform-origin:${renderData.x}px ${renderData.y}px;transform:scale(${renderData.scale}) translate(${renderData.x}px,${renderData.y}px)`}>
            <View style={`padding:${initData.padding[0]}px ${initData.padding[1]}px ${initData.padding[2]}px ${initData.padding[3]}px`}>
              {
                initData.isArea&&
                <AreaMap selectSeat={selectSeat} initData={initData} seatData={seatData}></AreaMap>
              }
              {
                !initData.isArea&&
                <DefaultMap selectSeat={selectSeat} initData={initData} seatData={seatData}></DefaultMap>
              }
            </View>
          </View>
        </View>
      }
    </View>
  )
}
